/*global Backbone, $, _, setTimeout, Isotope, document, console, content_view, Ext */

var Item = Backbone.Model.extend({
    defaults: {
        _id: 0,
        question: '写点什么吧',
        answer: '',
        explain: '',
        priority: 0,
        is_memo: 0,
        type: 'memo',
        sync_state: 'add'
    }
});

var ItemView = Backbone.View.extend({
    tagName: 'div',
    className: "question-item",
    isEdit: false,

    events: {
        'click': 'edit',
        'mouseenter': 'mouseenter',
        'mouseleave': 'mouseleave'
    },

    initialize: function () {
        _.bindAll(this, 'render', 'unrender', 'remove');

        this.model.bind('change', this.render);
        this.model.bind('remove', this.unrender);
    },

    render: function () {
        var type = Ext.String.htmlEncode(this.model.get('type'));
        var question = Ext.String.htmlEncode(this.model.get('question'));
        var answer = Ext.String.htmlEncode(this.model.get('answer'));

        var answer_p = '';

        if (type === 'bug' || type === 'todo' || type === 'memo') {
            answer_p = (answer === '' ? '' : '<p class="answer">' + this.item_html(answer) + '</p>');
        }

        var html = '<span class="glyphicon glyphicon-chevron-up cancel"></span>' +
            '<span class="glyphicon glyphicon-ok save"></span>' +
            '<span class="glyphicon glyphicon-tag tag"></span>' +
            '<p class="type">' + type + '</p>' +
            '<p class="question">' + this.item_html(question) + '</p>' +
            answer_p +
            this.get_html_select_type(type) +
            '<textarea name="question" class="question form-control" placeholder="题目"></textarea>' +
            '<textarea name="answer" class="answer form-control" placeholder="答案"></textarea>' +
            '<textarea name="explain" class="explain form-control" placeholder="题解"></textarea>';

        $(this.el).html(html);
        $(this.el).addClass(this.model.get('sync_state'));
        $(this.el).addClass(this.get_item_type());
        return this;
    },

    get_html_select_type: function (type) {
        var values = ['memo', 'bug', 'todo', 'quiz', 'php', 'javascript', 'html', 'css', 'java', 'android', 'shell', 'linux', 'vim', 'jquery', 'english'];

        var select = '<select style="display:none;">';

        _(values).each(function (value) {
            select += '<option value="' + value + '"' + (type === value ? 'selected="selected"' : '') + '>' + value + '</option>';
        }, this);

        select += '</select>';

        return select;
    },

    get_item_type: function () {
        var priority = this.model.get('priority');
        var is_memo = this.model.get('is_memo');
        var type = '';

        if (is_memo === 0) {
            type = 'quiz';
        } else {
            if (priority === 10) {
                type = 'memo';
            } else if (priority === 50) {
                type = 'todo';
            } else {
                type = 'bug';
            }
        }

        //console.log(priority, is_memo, type);

        return type;
    },

    unrender: function () {
        $(this.el).remove();
    },

    item_html: function (item) {
        return item.replace(/\n/g, '<br/>');
    },

    edit: function (event) {
        if (event.target === this.$el.find('span.cancel')[0]) {
            this.cancel();
            this.isEdit = false;
            return;
        }

        if (event.target === this.$el.find('span.save')[0]) {
            this.save();
            this.isEdit = false;
            return;
        }

        if (!this.isEdit) {
            this.isEdit = true;
            this.$el.find('p').hide();
            this.$el.find('span').show();
            this.$el.find('select').show();
            this.$el.find('textarea[name="question"]').show().val(this.model.get('question')).autosize({append: ""});
            this.$el.find('textarea[name="answer"]').show().val(this.model.get('answer')).autosize({append: ""});
            this.$el.find('textarea[name="explain"]').show().val(this.model.get('explain')).autosize({append: ""});
        }

        this.doLayout();
    },

    mouseenter: function () {
        //$(this.el).find('span').show();
    },

    mouseleave: function () {
        //$(this.el).find('span').hide();
    },

    remove: function () {
        this.model.destroy();
    },

    cancel: function () {
        this.showList();
        this.doLayout();
    },

    showList: function () {
        this.$el.find('span.save').hide();
        this.$el.find('span.cancel').hide();
        this.$el.find('select').hide();
        this.$el.find('textarea').hide();
        this.$el.find('p').show();
    },

    save: function () {
        this.showList();

        var sync_state = this.model.get('sync_state');
        this.model.set({
            type: this.$el.find('select').val(),
            question: this.$el.find('textarea[name="question"]').val(),
            answer: this.$el.find('textarea[name="answer"]').val(),
            explain: this.$el.find('textarea[name="explain"]').val(),
            sync_state: (sync_state === '' ? 'modify' : sync_state)
        });

        $.post('http://www.tomtalk.net/saveItem.php', this.model.attributes, function (result) {
            //console.log(result);
        }, 'json');

        this.doLayout();
    },

    doLayout: function () {
        content_view.isoArrange();
    }
});

var List = Backbone.Collection.extend({ model: Item });

//end file
